<template>
	<view class="wrap">
		<uni-nav-bar title="我的二维码" left-icon="back" @clickLeft="$tab.back()" :border="false" :fixed="true" :statusBar="true"></uni-nav-bar>
		
		<view class="content flex flex-col justify-between items-center relative">
			<image :src="userInfo.avatar" class="avatar round" mode=""></image>
			
			<view class="text-center text-32">
				<view class=" font-500">
					{{userInfo.nickName}}
				</view>
				<view class="text-9E9E9E mt-8">
					用户名:{{userInfo.userName}}
				</view>
			</view>
			
			<view class="qrcode-wrap flex justify-around items-center mt-36">
				<image :src="globalConfig.imagePrefix + userInfo.inviteQrCode" mode="widthFix" style="width: 80%;"></image>
			</view>
			
			<view class="text-9E9E9E mt-48">
				扫一扫二维码，添加我为好友
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:this.$store.getters.userInfo,
				globalConfig:getApp().globalData.config,
			};
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage']
			})
			// #endif
			
		},
	}
</script>

<style lang="scss">
	page,.wrap{
		width: 100%;
		height: 100%;
	}
	
	.content{
		width: 654rpx;
		height: 920rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: auto;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 10%;
		right: 0;
		padding: 88rpx 0;
		
		.avatar{
			width: 144rpx;
			height: 144rpx;
			position: absolute;
			left: 50%;
			top: -72rpx;
			transform: translateX(-50%);
		}
		
		.qrcode-wrap{
			width: 520rpx;
			height: 520rpx;
			background: #F8F8F8;
			border-radius: 28rpx;
		}
	}
</style>
